<template>
  <div class="app-container">
    <el-card>
      <title-line title="数据总览" />
      <div class="base-info flex">
        <img
          class="base-info-img"
          :src="avatar ? avatar : avatar_logo"
          style="width: 80px; height: 80px"
        />
        <el-row class="base-info-box ft-14 ml-20">
          <el-col
            v-for="(item, index) in baseInfo"
            :key="index"
            class="base-info-item mt-10"
            :span="8"
          >
            <span>{{ item.title }}</span>
            <span v-if="item.title">：</span>
            <span>{{ item.value ? item.value : '暂无' }}</span>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="mt-20">
      <Tabs :tabs="tabs" :current-key="currentKey">
        <el-button type="primary" @click="exportFile">导出</el-button>
      </Tabs>

      <PageTable
        :columns="columns"
        :options="options"
        :data="dataSource"
        @selectChange="selectChange"
      />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getUserExchangeDetail"
      />
    </el-card>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'ConvertDetail',
  props: {},
  data() {
    return {
      currentKey: 'INTEGRAL_GET',
      tabs: [
        {
          key: 'INTEGRAL_GET',
          label: '积分获得',
          num: ''
        }
      ],
      avatar: '',
      // 用户基础信息
      baseInfo: [
        {
          key: 'nickname',
          title: '',
          value: ''
        },
        {
          key: 'covertTime',
          title: '兑换时间',
          value: ''
        },
        {
          key: 'mobile',
          title: '手机号',
          value: ''
        },
        {
          key: 'accountTime',
          title: '到账时间',
          value: ''
        },
        {
          key: 'creatTime',
          title: '注册时间',
          value: ''
        }
      ],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      options: {
        select: true,
        border: true
      },
      dataSource: [],
      selectList: [],
      userInfo: {},
      columns: [
        {
          prop: 'integralSource',
          label: '积分来源',
          render: () => {
            return <div>积分抽奖</div>
          }
        },
        {
          prop: 'amount',
          label: '积分获得'
        },
        {
          prop: 'changeNo',
          label: '关联订单',
          width: '220px',
          render: (h, { row }) => {
            return (
              <div
                class="text-cursor"
                style={'color: #409eff;text-decoration: underline'}
                onClick={() =>
                  this.$router.push({
                    path: '/order/order_detail',
                    query: { orderNo: row.changeNo }
                  })
                }
              >
                <span>订单编号：</span>
                <span>{row.changeNo}</span>
              </div>
            )
          }
        },
        {
          prop: 'receiveTime',
          label: '获得时间'
        },
        {
          prop: 'status',
          label: '到账状态',
          render: () => {
            return <span>已到账</span>
          }
        },
        {
          prop: 'arrivalTime',
          label: '到账时间'
        },
        {
          prop: 'balance',
          label: '到账后积分余额',
          render: (h, { row }) => {
            return <span>{row.balance ? row.balance : '暂无'}</span>
          }
        }
      ]
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getUserInfo()
    this.getUserExchangeDetail()
  },
  methods: {
    // 获取积分兑换明细记录
    async getUserExchangeDetail() {
      const {
        data: { records, total }
      } = await this.$http.integral.integralSettlementApi.getUserExchangeDetail({
        ...this.listQuery,
        exchangeId: this.id
      })
      this.dataSource = records
      this.total = total

      // 统计
      this.tabs = this.tabs.map(item => {
        item.num = total
        return item
      })
    },
    async getUserInfo() {
      const { data } = await this.$http.integral.integralSettlementApi.getIntegralUserInfo(this.id)
      this.userInfo = data
    },
    selectChange(val) {
      this.selectList = val
    },
    // 导出部分
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据！')
      const headerData = this.columns.map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      const list = this.$lodash.cloneDeep(this.selectList)
      const tableData = list.map(item => {
        item.status = '已到账'
        item.integralSource = '积分抽奖'
        item.balance = item.balance || '暂无'
        return item
      })
      export2Excel(headerData, tableData, filterData, '积分兑换明细', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
